<template>
  <div class="map-tool">

    <!-- 菜单 -->
    <div class="menu">
      <div class="menu-item" v-for="(item, index) in menu" :key="item.name" @click="changeMenu(item, index)">
        <img class="menu-item_icon"
          :src="getAssetsFile(`${activeIndex === index ? item.icon + 'a' : item.icon}.svg`, 'map-tool')" />
      </div>
    </div>

    <!-- 子菜单 -->
    <el-card class="sub-menu" v-if="activeIndex == 0">
      <template #default>
        <div class="sub-menu_item pointer text-overflow" :class="[activeSubIndex == index ? 'act' : 'def']"
          v-for="(item, index) in 20" :key="item" @click="changeSubMenu(item, index)">测试自定义</div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { getAssetsFile } from "@/utils/assets"

const menu = [
  { name: "collect", icon: "1" },
  { name: "circle", icon: "2" },
  { name: "rect", icon: "3" },
  { name: "polygon", icon: "4" },
  { name: "enlarge", icon: "5" },
  { name: "narrow", icon: "6" },
]

// 父菜单被选中索引
const activeIndex = ref(-1)

// 子菜单被选中索引
const activeSubIndex = ref(-1)

// 切换父菜单
const changeMenu = (item, index) => {
  activeIndex.value = index
}

// 切换子菜单
const changeSubMenu = (item, index) => {
  activeSubIndex.value = index
}
</script>

<style scoped lang="scss">
.map-tool {
  display: flex;
  position: relative;

  .menu {
    background: #124457;
    border-radius: vw(7);
    padding: vh(8) vw(7);
    position: relative;

    .menu-item {
      height: vh(38);
      display: flex;
      justify-items: center;
      align-items: center;
      margin-bottom: vh(8);

      .menu-item_icon {
        width: vw(22);
      }
    }
  }

  .sub-menu {
    margin-left: vw(10);
    height: auto;
    max-height: vh(285);
    overflow-y: auto;
    padding-top: vh(5);

    .sub-menu_item {
      width: vw(80);
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: vw(13);
      margin-bottom: vh(10);
    }

    .def {
      color: rgba(255, 255, 255, 0.6);
    }

    .act {
      color: #FFFFFF;
    }
  }
}
</style>
